<template>
    <div id="receipt" style="width: 200px;" ref="receipt">
        <div style="border-bottom:1px dashed #000000;font-size:12px;text-align:center;padding-bottom:5px">
            <h1 style="width: 100%;text-align:center">当面付小票</h1>
            <div style="margin-top:5px">*{{element.storeName}}*</div>
            <div style="margin-top:5px">用户信息：{{element.userName}}（UID：{{element.userId}}）</div>
            <div style="margin-top:5px;width:100%;">--<span v-if="element.payMode=='1'">微信支付</span><span v-if="element.payMode=='5'">余额支付</span>--</div>
        </div>
        <div style="border-bottom:1px dashed #000000 ;font-size:12px">
            <div>订单编号:{{element.outTradeNo}}</div>
            <div>交易时间:{{element.createdAt}}</div>
            <div v-if="element.userNote">备注:{{element.userNote}}</div>
        </div>
        <div style="border-bottom:1px dashed #000000 ;">
            <h3 style="font-weight:bold">实付：￥{{element.money}}</h3>
        </div>
        <div style="margin-top:5px;font-size:14px;">门店电话：{{element.storeTel}}</div>
        <div style="text-align: center;padding-bottom: 30px;">
            <h4>谢谢惠顾</h4>
            <h4>欢迎下次光临</h4>
        </div>
        <h1>----完----</h1>
    </div>
</template>
<script>
import { getLodop } from "@/assets/js/LodopFuncs";
export default {
    props:{
        data:Object
    },
    computed:{
        element(){
            return this.data
        }
    },
    watch:{
           element(){
            // this.element.receivedTel = this.element.receivedTel.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
        },
    },
    methods:{
        printElement(printerName){
        console.log('printerName',printerName)
        var LODOP = getLodop();
        // LODOP.PRINT_INIT("");
        // LODOP.SET_PRINT_PAGESIZE(3, "58mm", 20, "");
        var strHTML = this.$refs.receipt.innerHTML;
        var height = this.$refs.receipt.offsetHeight;
        console.log(strHTML);
        LODOP.SET_PRINT_PAGESIZE(3, "58mm", 20, "");
        LODOP.ADD_PRINT_HTM(
          "9mm",
          "0mm",
          "RightMargin:0mm",
          height + "px",
          strHTML
        );
        // console.log(LODOP.GET_PRINTER_NAME(0))
        // console.log(LODOP.GET_PRINTER_NAME(1))
        // console.log(LODOP.GET_PRINTER_NAME(2))
        // console.log(LODOP.GET_PRINTER_NAME(3))
        // GET_PRINTER_COUNT
          if( LODOP.SET_PRINTER_INDEX(printerName)){
            // LODOP.PREVIEW()
            LODOP.PRINT(); //
          }
    }
    }
}
</script>
<style scoped>
h1,h2{
    width: 100%;
    text-align: center;
}
.wid100{
    width: 100%;
}
.textAC{
    text-align: center;
}
</style>
